<template>

   <div>
      <!-- 头部开始  -->
      <Header />
      <!-- 头部结束 -->

      <!-- 表单区域 -->
         <div class="div1">
            <!-- 表单分组 -->
         <van-cell-group>
             <van-tabs v-model="active">
                 <!-- 用户密码登录 -->
               <van-tab title="用户名登录">
               <van-field v-model="username" label='用户名' placeholder="请输入用户名" />
               <van-field v-model="password" label='密码' placeholder="请输入密码" />
               </van-tab>

                
                <!-- 手机号验证码登录 -->
               <van-tab title="手机号登录">
               <van-field v-model="phone" label='您的手机号' placeholder="请输入您的手机号" />
               <van-field v-model="password" label='密码' placeholder="请输入密码" />
               </van-tab>


                <!-- 邮箱登录 -->
               <van-tab title="邮箱登录">
               <van-field v-model="email" label='您的邮箱' placeholder="请输入您的邮箱" />
               <van-field v-model="password" label='密码' placeholder="请输入密码" />
               </van-tab>
               </van-tabs>

               <van-button  type='primary' @click="submit" >登录</van-button>

               <van-button  type='info' >重置</van-button>
         </van-cell-group>
         </div>
      <!-- 表单区域 -->
                  <!-- 完成注册功能(前后端)
                  将网站尾部包含进注册页面
                  完善字段(手机号/邮箱)
                  完成登录功能(多账号登录)
                  预习图片验证码 -->

         <Fooder/>
   </div>

</template>

<script>
import header from './header'
import fooder from './fooder'
export default {
   data(){
       return {
            username:'',
            password:'',
            phone:"",
            email:'',
            active:2


       }
   },
   //声明组件
   components:{
      'Header':header,
      'Fooder':fooder,
      
   },
   methods:{
      submit(){
         if (this.username==''){
            this.$toast("请填写用户名")
            return false
         }
         if (this.password!=this.password2){
               alert('您输入的密码不一致')
         }else{
            console.log('改用戶的用戶名密码和邮件',this.username,this.password,this.phone,this.email);
               this.axios.post('http://127.0.0.1:8000/registers/',{"username":this.username,"password":this.password,"phone":this.phone,"email":this.email}).then(res=>{
               alert(res.data.message)

            })
            
         }
         
        
      }
   },
   created(){
       
   }
}
</script>

<style>
.div1{
   margin: 0 auto;
}
</style>